<template>
    <div>
        <div >
            <el-card>
                <div style="width: 100%;margin-left: 10px;">
                    <el-row :gutter="10">
                        <!-- <el-col :span="4">
                    <el-form-item label="主叫前缀:">
                        <el-input v-model="searchForm.activePrefix" />
                    </el-form-item>
                </el-col> -->
                        <el-col :span="4">
                            <el-form-item label="被叫前缀:">
                                <el-input v-model="searchForm.passivePrefix" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="落地A路:">
                                <el-input v-model="searchForm.fallA" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="落地X路:">
                                <el-input v-model="searchForm.fallX" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="通道:">
                                <el-input v-model="searchForm.bindUrl" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="4">
                    <el-form-item label="IP地址:">
                        <el-input v-model="searchForm.ipAddr" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="落地前缀:">
                        <el-input v-model="searchForm.fallPrefix" />
                    </el-form-item>
                </el-col> -->
                        <el-col :span="4">
                            <el-button type="primary" @click="getRecords"><el-icon>
                                    <Search />
                                </el-icon>查询</el-button>
                            <el-button type="info" @click="clearData"><el-icon>
                                    <Close />
                                </el-icon>清空</el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <el-button type="success" @click="addTableData" v-if="permissionStore.isPermissionsBtn('011001001')"><el-icon>
                                    <Plus />
                                </el-icon>添加</el-button>
                            <!-- <el-button type="primary" v-if="permissionStore.isPermissionsBtn('011001002')">
                                <el-icon>
                                    <CopyDocument />
                                </el-icon>
                                导入</el-button>
                            <el-button type="primary" v-if="permissionStore.isPermissionsBtn('011001003')">
                                <el-icon>
                                    <DocumentRemove />
                                </el-icon>
                                导出</el-button> -->
                            <el-button type="danger" @click="removeTableData" v-if="permissionStore.isPermissionsBtn('011001004')"><el-icon>
                                    <Delete />
                                </el-icon>批量删除</el-button>
                        </el-col>
                    </el-row>

                </div>
                <div class="mt30">
                    <el-table :data="tableData" style="width: 100%;height:60vh" stripe
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="85" align="center" />
                        <el-table-column type="index" width="80" label="序号" align="center" />
                        <!-- <el-table-column prop="activePrefix" label="主叫前缀" width="150" align="center" /> -->
                        <el-table-column prop="passivePrefix" label="被叫前缀" width="100" align="center" />
                        <!-- <el-table-column prop="ipAddr" label="IP地址" width="150" align="center" /> -->
                        <el-table-column prop="fallPrefix" label="落地前缀" width="100" align="center" />
                        <el-table-column prop="fallA" label="落地A路" width="100" align="center" />
                        <el-table-column prop="fallACount" label="A路并发" width="100" align="center" />
                        <el-table-column prop="fallX" label="落地X路" width="100" align="center" />
                        <el-table-column prop="fallXCount" label="X路并发" width="100" align="center" />
                        <el-table-column prop="fallXPrefix" label="X路前缀" width="100" align="center" />
                        <el-table-column prop="fallXCountT" label="X路频次" width="100" align="center">
                            <template #default="scope">
                                <el-tag type="success" class="mx-1" effect="dark" v-if="scope.row.fallXCountT">{{
                                    scope.row.fallXCountT + "/" + scope.row.fallXCountC }}
                                </el-tag>
                                <el-tag type="danger" class="mx-1" effect="dark" v-else>
                                    无
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fallY" label="落地Y路" width="100" align="center" />
                        <el-table-column prop="openFall" label="落地显" width="80" align="center">
                            <template #default="scope">
                                <el-tag type="success" class="mx-1" effect="dark" v-if="scope.row.openFall">
                                    开启
                                </el-tag>
                                <el-tag type="danger" class="mx-1" effect="dark" v-else>
                                    关闭
                                </el-tag>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="isOpen" label="预留功能" width="120" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.isOpen === '1' ? '开启' : '关闭' }}</span>
                    </template>
                </el-table-column> -->
                        <el-table-column prop="bindUrl" label="通道" align="center" width="150" :formatter="channelType">
                            <template #header>
                                <span slot="content">通道</span>
                                <el-tooltip class="box-item" effect="dark" placement="top-start">
                                    <template #content>浙江宁波电信:
                                        http://123.57.135.127:28080/api/v2/dx/axb/wj/bind<br />连连:
                                        http://api.wjwlcall.com/api/v2/dx/axb/wj/bind</template>
                                    <el-icon>
                                        <QuestionFilled />
                                    </el-icon>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center" min-width="100"
                            :show-overflow-tooltip='true' />
                        <el-table-column label="操作" align="center" fixed="right" min-width="200">
                            <template #default="scope">
                                <el-button type="warning" @click="editForm(scope.$index, scope.row)" v-if="permissionStore.isPermissionsBtn('011001005')"
                                    size="default">编辑</el-button>
                                <el-button type="danger" @click="deleteForm(scope.$index, scope.row)" v-if="permissionStore.isPermissionsBtn('011001006')"
                                    size="default">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>

            <div style="margin-top: 20px;">
                <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                    v-model:page-size="pageSize" :page-sizes="[10, 10000]" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
        </div>

        <div>
            <el-dialog v-model="centerDialogVisible" :title="dialogTitle" width="700px" center>
                <div>
                    <el-form :model="form" label-width="120px" label-position="top">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="A路并发:">
                                    <el-input v-model="submitForm.fallACount" placeholder="A路并发" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="X路并发:">
                                    <el-input v-model="submitForm.fallXCount" placeholder="X路并发" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="X路并发前缀:">
                                    <el-input v-model="submitForm.fallXPrefix" placeholder="默认值:0" maxlength="3" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="呼入被叫前缀:">
                                    <el-input v-model="submitForm.passivePrefix" placeholder="输入被叫前缀" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="X路频次(时间):">
                                    <el-input v-model="submitForm.fallXCountT" placeholder="时间(秒)" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="X路频次(次数):">
                                    <el-input v-model="submitForm.fallXCountC" placeholder="次数" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="呼出落地前缀:">
                                    <el-input v-model="submitForm.fallPrefix" placeholder="请输入落地前缀" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="落地A路:">
                                    <el-select v-model="submitForm.fallA" placeholder="请选择" style="width:100%"
                                        filterable multiple clearable>
                                        <el-option v-for="item in fallAGroup" :key="item.value + item.label"
                                            :label="item.label" :value="item.label">
                                            <span style="float: left">{{ item.label }}</span>
                                            <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="落地X路:">
                                    <el-select v-model="submitForm.fallX" placeholder="请选择" style="width:100%"
                                        filterable>
                                        <el-option v-for="item in fallXGroup" :key="item.value + item.label"
                                            :label="item.label" :value="item.label">
                                            <span style="float: left">{{ item.label }}</span>
                                            <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="Y路频次(时间):">
                                        <el-input v-model="submitForm.fallYCountT" placeholder="时间(秒)" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="Y路频次(次数):">
                                        <el-input v-model="submitForm.fallYCountC" placeholder="次数" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="Y路并发:">
                                        <el-input v-model="submitForm.fallYCount" placeholder="X路并发" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="落地Y路:">
                                        <el-select v-model="submitForm.fallY" placeholder="请选择" style="width:100%"
                                            filterable>
                                            <el-option v-for="item in fallYGroup" :key="item.value + item.label"
                                                :label="item.label" :value="item.label">
                                                <span style="float: left">{{ item.label }}</span>
                                                <span
                                                    style=" float: right;color: var(--el-text-color-secondary); font-size: 13px; ">{{
                                                    item.value }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="落地显:">
                                    <el-select v-model="submitForm.openFall" placeholder="请选择" style="width:100%">
                                        <el-option label="开启" :value="true" />
                                        <el-option label="关闭" :value="false" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="通道:">
                                    <el-select v-model="submitForm.bindUrl" placeholder="请选择" style="width:100%">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />

                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="备注:">
                                    <el-input v-model="submitForm.remark" placeholder="请输入备注" :rows="2"
                                        type="textarea" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="mySubmit">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { selectPage, insert, batchDelete } from "@/api/bussiness/interfacingGateway";
import { getAGroup } from "@/api/bussiness/numberA";
import { getXGroup } from "@/api/bussiness/numberX"
import {
    Delete, DocumentRemove, CopyDocument, Plus, Search, QuestionFilled, Close
} from '@element-plus/icons-vue'
import { getYGroup } from '@/api/bussiness/numberY';
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
onMounted(() => {
    getRecords()
    getFallAList()
    getFallXList()
    getFallYList()
})
const options = ref([
    {
        value: 'LL',
        label: '连连'
    }, {
        value: 'ZJNBDX',
        label: '浙江宁波电信'
    }, {
        value: 'JNDX',
        label: '济南电信'
    }, {
        value: 'XJDX',
        label: '新疆电信'
    }, {
        value: 'NCDX',
        label: '南昌电信'
    }, {
        value: 'NJDX',
        label: '南京电信-202'
    }, {
        value: 'NMDX',
        label: '内蒙电信-444'
    }, {
        value: 'TZDX',
        label: '泰州电信-203'
    }, {
        value: 'ZQDX',
        label: '肇庆电信(东莞茂港)-223'
    }, {
        value: 'HNDX',
        label: '河南电信'
    }, {
        value: 'HNDXZKJ',
        label: '河南电信(中关村科金)-658'
    }, {
        value: 'XJBJHH',
        label: '新疆电信(北京好还)-557'
    }, {
        value: 'CDDX',
        label: '成都电信(分期乐)-205'
    }, {
        value: 'TJDX',
        label: '天津电信(度小满)-206'
    }, {
        value: 'ZQWS',
        label: '肇庆电信(维什)-225'
    }, {
        value: 'FSGXJS',
        label: '佛山电信(广西嘉数)-226'
    }
    // ,{
    //     value: 'MYJF',
    //     label: '南昌电信(蚂蚁金服)-778'
    // },
    , {
        value: 'MYJF',
        label: '成都电信(富民银行)-208'
    }, {
        value: 'QHDXHR',
        label: '青海电信(海尔消金)-207'
    }, {
        value: 'ZDYJ',
        label: '中电翼金 虚商对接-301'
    }, {
        value: '',
        label: '未定义'
    }])
const dialogTitle = ref('')
const tableData = ref<any>([])
const searchForm = reactive({
    bindUrl: '',
    activePrefix: '',
    passivePrefix: '',
    ipAddr: '',
    fallPrefix: '',
    remark: '',
    fallA: '',
    fallX: ''
})
const submitForm = reactive({
    gid: '',
    activePrefix: '',
    fallACount: '',
    fallXCount: '',
    passivePrefix: '',
    fallXPrefix: '0',
    fallXCountT: '',
    fallXCountC: '',
    ipAddr: '',
    fallPrefix: '',
    fallA: '',
    fallX: '',
    openFall: false,
    remark: '',
    bindUrl: '',
    fallYCountT: '',
    fallYCountC: '',
    fallY: '',
    fallYCount: ''
})
const form = reactive({
    gatewayID: '',
    ip: ''
})
const pageSize = ref(10)
const fallAGroup = ref([])
const fallXGroup = ref([])
const fallYGroup = ref([])
const centerDialogVisible = ref(false)
const ids = ref([])
const multipleSelection = ref<any>([])
const total = ref()
const currentPageIndex = ref(1)
const channelType = (cellVal) => {
    let result = '未定义'
    options.value.forEach((item) => {
        if (item.value == cellVal.bindUrl) {
            result = item.label
        }
    })
    return result
}
const getFallXList = () => {
    getXGroup().then(res => {
        if (res.code === 200) {
            fallXGroup.value = []
            res.data?.forEach((item) => {
                fallXGroup.value.push({ label: item.fall_x, value: item.remark })
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}

const getFallYList = () => {
    getYGroup().then(res => {
        if (res.code === 200) {
            fallYGroup.value = []
            res.data?.forEach((item) => {
                fallYGroup.value.push({ label: item.fall_y, value: item.remark })
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const getFallAList = () => {
    getAGroup().then(res => {
        if (res.code === 200) {
            fallAGroup.value = []
            res.data?.forEach((item) => {
                fallAGroup.value.push({ label: item.fall_a, value: item.remark })
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const mySubmit = () => {
    centerDialogVisible.value = false
    const params = {
        gid: submitForm.gid,
        activePrefix: submitForm.activePrefix,
        passivePrefix: submitForm.passivePrefix,
        ipAddr: submitForm.ipAddr,
        fallPrefix: submitForm.fallPrefix,
        fallXPrefix: submitForm.fallXPrefix,
        fallA: submitForm.fallA.toString(),
        fallX: submitForm.fallX,
        fallACount: submitForm.fallACount,
        fallXCountT: submitForm.fallXCountT,
        fallXCountC: submitForm.fallXCountC,
        fallXCount: submitForm.fallXCount,
        fallY: submitForm.fallY,
        fallYCountT: submitForm.fallYCountT,
        fallYCountC: submitForm.fallYCountC,
        fallYCount: submitForm.fallYCount,
        openFall: submitForm.openFall,
        remark: submitForm.remark,
        bindUrl: submitForm.bindUrl
    }
    insert(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const clearObj = () => {
    submitForm.gid = '',
        submitForm.activePrefix = '',
        submitForm.passivePrefix = '',
        submitForm.openFall = true,
        submitForm.fallACount = '',
        submitForm.fallXCount = '',
        submitForm.fallXPrefix = '0',
        submitForm.ipAddr = '',
        submitForm.fallPrefix = '',
        submitForm.fallA = '',
        submitForm.fallX = '',
        submitForm.openFall = false,
        submitForm.bindUrl = '',
        submitForm.remark = ''
    submitForm.fallYCountT = '',
        submitForm.fallYCountC = '',
        submitForm.fallY = '',
        submitForm.fallYCount = ''
}
const batchDeleteAll = () => {
    const params = {
        deleteIds: ids.value
    }
    batchDelete(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPageIndex.value = val
    getRecords()
}
const handleSizeChange = (val: number) => {
    currentPageIndex.value = val
    getRecords()
}
const clearData = () => {
    Object.assign(searchForm, {
        activePrefix: '',
        passivePrefix: '',
        ipAddr: '',
        fallPrefix: '',
        bindUrl: '',
        remark: '',
        fallA: '',
        fallX: ''
    });
    getRecords()
}
const getRecords = () => {
    let bindurl = []
    options.value.forEach(item => {
        if (item.label.includes(searchForm.bindUrl)) {
            bindurl.push(item.value)
        }
    })
    const params = {
        pageNum: currentPageIndex.value,
        pageSize: pageSize.value,
        activePrefix: searchForm.activePrefix,
        passivePrefix: searchForm.passivePrefix,
        ipAddr: searchForm.ipAddr,
        fallPrefix: searchForm.fallPrefix,
        bindUrl: bindurl,
        remark: searchForm.remark,
        fallA: searchForm.fallA,
        fallX: searchForm.fallX
    }
    selectPage(params).then(res => {
        if (res.code === 200) {
            tableData.value = []
            total.value = res.data.total
            tableData.value.push(...res.data.records)

        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const editForm = (index: number, row: any) => {
    dialogTitle.value = '修改表单'
    centerDialogVisible.value = true
    Object.assign(submitForm, row);
    submitForm.fallA = row.fallA.split(",")
}

const deleteForm = (index: number, row: any) => {
    ids.value = []
    // if (multipleSelection.value.length > 0) {
    ElMessageBox.confirm(
        '是否删除本条数据',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ids.value.push(row.gid)
            batchDeleteAll()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// }
const handleSelectionChange = (val: any) => {
    ids.value = []
    multipleSelection.value = val
    multipleSelection.value.forEach(item => {
        ids.value.push(item.gid)
    })
}
const addTableData = () => {
    clearObj()
    dialogTitle.value = '新增表单'
    centerDialogVisible.value = true
}
const removeTableData = () => {
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否删除' + multipleSelection.value.length + '条数据',

            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                batchDeleteAll()

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    } else {
        ElMessage({
            type: 'warning',
            message: '请选择数据',
        })
    }
}

</script>

<style scoped>
.gateInput {
    width: 50px;

}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>